<template>
<div>
  <div>我是用户页:用户id{{ $route.params.user_id }}</div>
  <div>用户信息：{{userinfo?userinfo.name:''}},{{userinfo?userinfo.age:''}},{{userinfo?userinfo.txt:''}}</div>
  <input type="text" v-model="nameval">
  <input type="text" v-model="ageval">
  <div @click="changeFn">修改</div>
  <div @click="add">新增</div>
  <div @click="del">删除</div>
  <div @click="changeFnyb">异步编辑</div>
</div>
</template>

<script>
import Vue from 'vue'
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      userid:'',
      userinfo:null,
      nameval:'',
      ageval:''
    }
  },
  mounted() {
    console.log(this.$store)
    this.userinfo = this.$store.state;
  },
  methods:{
    changeFn(){

      this.$store.commit('edit',{name:this.nameval,age:this.ageval})
    },
    add(){
      console.log(Vue)
      Vue.set(this.$store.state,"txt",'美丽的')
    },
    del(){
      Vue.delete(this.$store.state,"age")
    },
    changeFnyb(){
      this.$store.dispatch('aedit',{age:109})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
  width: 300px;

  background-color: rgba(255, 0, 0, .3);
}
</style>
